﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>PetShop</title>
    <link href="semantic/packaged/css/semantic.css" rel="stylesheet" type="text/css" />
    <link href="Themes/global.css" rel="stylesheet" type="text/css" />
    <link href="Themes/Welcome.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>
    <script src="semantic/packaged/javascript/semantic.js" type="text/javascript"></script>
    <script src="Scripts/Welcome.js" type="text/javascript"></script>
</head>
<body>
    <div class="main container">
        <!--Top navigation bar-->
        <div id="topBar" class="topBar">
            <div class="floatRight">
                <div class="ui icon input">
                    <input type="text" placeholder="Search...">
                    <i class="search icon"></i>
                </div>
                <div id="loginDiv" class="ui label" onclick="javascript:showLoginModal();">
                    <i class="user icon iconAnimation"></i>anonymous
                </div>
                <a href="CarritoCompras.htm"><i class="cart icon iconAnimation"></i></a>
            </div>
        </div>
        <!-- Header bar -->
        <div id="headerBar" class="headerBar">
             <a href="Welcome.htm"> <img class="ui logo rounded image" src="Images/logo.jpg" > </a>
            <div class="floatRight rightHeaderRail">
                <div class="floatRight">
                    <span>Síguenos en</span> <i class="facebook icon big iconAnimation"></i><i class="twitter icon big iconAnimation">
                    </i>
                </div>
                <div class="ui purple inverted menu">
                    <div class="active ui dropdown item">
                        Mascotas<i class="dropdown icon"></i>
                        <div class="menu">
                            <a class="item" href="ProductGallery.htm?galleryType=1">Perros</a> <a class="item" href="ProductGallery.htm?galleryType=2">Gatos</a> <a
                                class="item" href="ProductGallery.htm?galleryType=3">Conejos</a>
                        </div>
                    </div>
                    <div class="active ui dropdown item">
                        Productos<i class="dropdown icon"></i>
                        <div class="menu">
                            <a class="item">Collares</a> <a class="item">Alimento</a> <a class="item">Juguetes</a>
                        </div>
                    </div>
                    <a class="item" href="Contact.htm">Contacto </a>
                </div>
            </div>
			
			
        </div>
        <div class="ui red inverted segment" style="width: 1225px; height: 300px; margin-left: 60px">
            <img src="images/slider.png" style="width: 1195px; height: 270px;">
        </div>
        <!-- Slider fin -->
        <!-- Main content place holder -->
        <div class="ui tertiary form segment mainPlaceholder">
            <!-- Mascotas -->
            <div class="ui connected items">
                <div class="row">
                    <div class="item">
                        <div class="image">
                            <img src="Images/perrito.jpg" style="width: 425px; height: 300px;">
                        </div>
                        <div class="content">
                            <div class="name">
                                Perro</div>
                            <p class="description">
                                Los caninos son el mejor amigo del hombre y te brindara mucha diversión excelentes
                                momentos.</p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="image">
                            <img src="Images/gatico.jpg" style="width: 425px; height: 300px;">
                        </div>
                        <div class="content">
                            <div class="name">
                                Gato</div>
                            <p class="description">
                                Los felinos excelente compañia son muy cariños, les encanta jueguetear y ronronear.</p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="image">
                            <img src="Images/conejito.jpg" style="width: 425px; height: 300px;">
                        </div>
                        <div class="content">
                            <div class="name">
                                Conejo</div>
                            <p class="description">
                                Hay variedades diferentes, está el conejo de corral y el conejo de monte.</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Mascotas fin -->
            <!-- Productos -->
            <div class="ui connected items">
                <div class="row">
                    <div class="item">
                        <b>Mascotas</b>
                        <div class="ui vertical menu">
                            <a class="active teal item">Perros </a><a class="item">Gatos </a><a class="item">Conejos
                            </a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="image">
                            <img src="Images/collar.jpg" style="width: 360px; height: 200px;">
                        </div>
                        <div class="content">
                            <div class="name">
                                Collares</div>
                            <p class="description">
                                Los collares son elementales en caso de extravio del animal.</p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="image">
                            <img src="Images/alimento.jpg" style="width: 325px; height: 200px;">
                        </div>
                        <div class="content">
                            <div class="name">
                                Alimento</div>
                            <p class="description">
                                Existe diferentes tipos de alimento para cada tipo de animal.</p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="image">
                            <img src="Images/juguete.jpg" style="width: 325px; height: 200px;">
                        </div>
                        <div class="content">
                            <div class="name">
                                Juguetes</div>
                            <p class="description">
                                Variedad para cada mascota.</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Mascotas fin -->
        </div>
        <!-- Footer -->
        <div class="footer customBorderFooter">
            <div class="ui horizontal list customPagination">
                <div class="item customFooterFontText customFooterColMargin">
                    Servicio al Cliente
                    <div class="ui inverted link list">
                        <a class="item customFooterSubtitleFontText">Politícas</a> <a class="item customFooterSubtitleFontText">
                            Preguntas Frecuentes</a>
                    </div>
                </div>
                <div class="item customFooterFontText customFooterColMargin">
                    Formas de Pago
                    <div class="ui inverted link list">
                        <a class="item customFooterSubtitleFontText">Tarjetas</a> <a class="item customFooterSubtitleFontText">
                            Pago contra entrega</a>
                    </div>
                </div>
                <div class="item customFooterFontText">
                    Contáctenos
                    <div class="ui inverted link list">
                        <a class="item customFooterSubtitleFontText linkFontStyleNormal" href="Contact.htm">
                            Nos puedes contactar</a> <a class="item customFooterSubtitleFontText linkFontStyleNormal"
                                href="Contact.htm">usando nuestro formulario</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- Login modal-->
        <div class="ui login modal small">
            <i class="close icon"></i>
            <div class="header">
                Login
            </div>
            <div class="content">
                <div class="ui input" style="margin-bottom: 10px;">
                    <input type="text" placeholder="Username" />
                </div>
                <div class="ui input">
                    <input type="text" placeholder="Password" />
                </div>
            </div>
            <div class="actions">
                <div class="ui button">
                    Cancelar
                </div>
                <div class="ui button">
                    Ingresar
                </div>
            </div>
        </div>
</body>
</html>
